<template>
<!-- 头部导航栏组件 -->
  <div class="v-header">
    <status-bar></status-bar>
    <header>{{title}}
      <!-- 返回上一页按钮 -->
      <i class="back" @click="back"></i>  
      <!-- 右上角自定义按钮 -->
      <slot></slot>
    </header>
    
  </div>
</template>

<script type="text/ecmascript-6">

import StatusBar from 'components/status-bar'

export default {
  props: {
    title: String,
    default: ''
  },
  data() {
    return {

    }
  },
  components: {
    StatusBar
  },
  methods: {
    back: function () {
      this.$router.goBack()
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../common/stylus/mixin.styl'
@import '../common/stylus/variable.styl'
.v-header
  bg-image('../common/images/bar-bg')
  background-size 100% 100%
  header
    position relative
    width 100% 
    height 48px
    line-height 48px
    font-size $font-size-large
    color #fff
    text-align center
    .back
      position absolute
      display block
      width 11px
      height 22px
      left 20px
      top 50% 
      transform translateY(-50%)
      bg-image('../common/images/back')
      background-size 11px 22px
      extend-click()
    .custom-btn
      position absolute
      display block
      right 20px
      top 50% 
      transform translateY(-50%)
      font-size $font-size-medium
      color #ffffff
      extend-click()
      

</style>
